import React from 'react'
import * as echarts from 'echarts';

import Title from '../User_analytics/Component/Title'
import Flushed from '../Operate_monitor/Component/flushed'
import User_Profile from '../User_analytics/Component/User_Profile'
import Trend from './Component/Trend'
import Tabular from './Component/Tabular'


export default function Trade_analytics() {

  const data = [
    {
      _id: new Date('2022-01-01'),
      name: '团长数',
      num: 10,
      trend: '↑ 0.5%'
    },
    {
      _id: new Date('2022-01-02'),
      name: '新增团长',
      num: 1,
      trend: '↑ 0.5%'
    },
    {
      _id: new Date('2022-01-03'),
      name: '活跃团长',
      num: 0,
      trend: '↑ 0%'
    },
    {
      _id: new Date('2022-01-04'),
      name: '团长佣金',
      num: 1306,
      trend: '↑ 4%'
    },
    {
      _id: new Date('2022-01-05'),
      name: '分享订单',
      num: 230,
      trend: '↑ 0%'
    },
  ]

  const box = () => {
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '团长地区分析',
        subtext: '2024-11-15',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 12, name: '北京' },
            { value: 5, name: '上海' },
            { value: 8, name: '广州' },
            { value: 4, name: '深圳' },
            { value: 3, name: '杭州' },
            { value: 1, name: '石家庄' },
            { value: 11, name: '邢台' },
            { value: 9, name: '邯郸' },
            { value: 4, name: '廊坊' },
            { value: 3, name: '保定' },
            { value: 1, name: '天津' }, 

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }


  const twobox = () => {
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '团长销售金额以及佣金'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: [ '北京','上海','广州','深圳','杭州','石家庄','邯郸','邢台','保定','廊坊','天津']
      },
      series: [
        {
          name: '佣金明细',
          type: 'bar',
          data: [659,123,533,953,521,232,532,122,421,321,421]
        },
        {
          name: '销售数量明细',
          type: 'bar',
          data: [320, 332, 301, 334, 390, 330, 320, 321, 321, 321, 321]
        }
      ]
    };

    option && myChart.setOption(option);
  }






  return (
    <div>
      <Title title='团长分析' />
      <Flushed />
      <User_Profile name='交易概况' data={data} />
      <Trend name='团长数据' onetable='main1' twotable='main2' onebox={box} twobox={twobox}></Trend>
      <Tabular name='团长增长'></Tabular>
    </div>
  )
}
